import React,{ Component } from 'react';
import { Link } from 'dva/router';
import { connect } from 'dva';
import {Result, WhiteSpace, Button, Icon, WingBlank} from 'antd-mobile';
import styles from './PayResult.css';
const myImg = src => <img src={src} className={`${styles.spe} am-icon am-icon-md`} alt="" />;
class PayResult extends Component {
    constructor (props) {
        super(props);
        this.state = {
        }
    }
    componentDidMount() {
    }
    reflushPay(){
        const {id} = this.props.match.params;
        this.props.dispatch({type:'pay/getPayResult',payload:{order_id: id}});
    }
    render() {
    const { pay } = this.props;
    let result;
    if (pay.payState === 'PAY_SUCCESS') {
        result = (
            <div>
            <Result
                img={<Icon type="check-circle" className={styles.spe} style={{ fill: '#1F90E6' }} />}
                title="购买成功"
                message="已完成购买"
            />
            <WingBlank size='md'>
            <Link to='/'>
            <Button type="primary">返回首页</Button>
            </Link>
            </WingBlank>
            </div>
        );
    } else {
        result = (
            <div>
            <Result
                img={myImg('https://gw.alipayobjects.com/zos/rmsportal/HWuSTipkjJRfTWekgTUG.svg')}
                title="等待处理"
                message="已提交申请，等待处理"
            />
            <WingBlank size='md'>
            <Button type="primary" onClick = {() => this.reflushPay()}>点击更新支付状态</Button>
            </WingBlank>
            </div>
        );
    }
    return (
        <div className="result-example"> 
            <WhiteSpace size = 'xl' />
            {result}
        </div>
    )
    }
}

function mapStateToProps({pay}) {
    return {
        pay,
    }
}

export default connect(mapStateToProps)(PayResult);